import React from 'react'
import { Card, Button, Table, Divider, Row, Modal, Steps } from 'antd'
import DescriptionList from 'components/DescriptionList'
import {
  contractOrderType,
  productType,
  logisticsStatus,
  contractOrderStatus,
  contractActionType
} from 'utils/enumConfig'
import moment from 'moment'
import { LwjDownload } from 'components'
import style from './index.less'
import { logisticsCancelStatus } from 'utils/enumConfig'

const Step = Steps.Step

const LogisticsDetailModal = ({dispatch, ...LogisticsDetailModalProps}) => {

  const {Description} = DescriptionList
  const currentItem = LogisticsDetailModalProps.currentItem

  /** @namespace currentItem.numberOfGoods */
  /** @namespace currentItem.consignor */
  /** @namespace currentItem.consignee */
  /** @namespace currentItem.receivingAddress */
  /** @namespace currentItem.estimatedArrivalAt */
  /** @namespace currentItem.actualArrivalAt */
  return (
    <div>
      {/* <Modal {...LogisticsDetailModalProps}> */}
      <Card bordered={false}>
        <DescriptionList size="large"
                         title="物流详情信息"
                         style={{marginBottom: 32}}>
          <Description
            term="物流状态">{currentItem.cancelStatus === 'NONE' ? logisticsStatus[currentItem.logisticsStatus] : logisticsCancelStatus[currentItem.cancelStatus]}</Description>
          {!_.isEmpty(currentItem.createTime) &&
          <Description term="物流下单时间">{moment(currentItem.createTime).format('YYYY-MM-DD HH:mm:ss')}</Description>}
          <Description term="货物件数">{currentItem.numberOfGoods}</Description>
          <Description term="发货人">{currentItem.consignor}</Description>
          <Description term="发货地址">{currentItem.shippingAddress}</Description>
          <Description term="收货人">{currentItem.consignee}</Description>
          <Description term="收货地址">{currentItem.receivingAddress}</Description>
          <Description term="路线">{currentItem.route}</Description>
          {!_.isEmpty(currentItem.estimatedArrivalAt) && <Description
            term="预计到货时间">{moment(currentItem.estimatedArrivalAt).format('YYYY-MM-DD HH:mm:ss')}</Description>}
          {!_.isEmpty(currentItem.actualArrivalAt) && <Description
            term="实际到货时间">{moment(currentItem.actualArrivalAt).format('YYYY-MM-DD HH:mm:ss')}</Description>}
        </DescriptionList>

        <Divider style={{marginBottom: 32}}/>
        <DescriptionList size="large"
                         title="物流跟踪信息"
                         style={{marginBottom: 32}}>
          <div style={{overflowX: 'auto'}}>
            <Steps progressDot current={!_.isEmpty(currentItem.activities) ? currentItem.activities.length - 1 : 0}
                   style={{margin: 32}}>
              {currentItem.activities !== undefined && currentItem.activities !== null && currentItem.activities.map((activity, index) => (
                  <Step key={index} title={activity.origin} description={(<div>
                    <span>{activity.action}</span><br/>
                    <span>{activity.creatorName}</span><br/>
                    <span>{moment(activity.createTime).format('YYYY-MM-DD HH:mm:ss')}</span><br/>
                    <span>{activity.memo}</span>
                  </div>)}
                        className={style.stepsDescription}/>
                )
              )}
            </Steps>
          </div>

        </DescriptionList>
      </Card>
      {/* </Modal> */}

    </div>
  )
}

export default LogisticsDetailModal
